<!--
 * @Description: 
 * @Author: Binggan
 * @Date: 2019-05-28 09:15:51
 * @LastEditors: Binggan
 * @LastEditTime: 2019-10-12 09:49:19
 -->
<template>
    <div>
        <label><strong>标题：</strong><Input v-model="courseTitle" placeholder="在此处输入内容标题..." clearable class="m-t-10 tit-input"/></label>
        <!-- <label style="margin-left:15px"><strong>作者：</strong><Input v-model="courseAuthor" placeholder="在此处输入作者名字" clearable class="m-t-10 tit-input" style="width:150px;"/></label> -->
        <vue-ueditor-wrap class="m-t-20 editor-wrap" v-model="oMsg" :config="myConfig" @beforeInit="addCustomUI"></vue-ueditor-wrap>
        <Button type="primary" class="m-t-20" @click="saveCourseInfo" style="margin-right:20px">保存</Button>
        <Button type="warning" class="m-t-20" to="/courseInfo">关闭</Button>

        <!-- 插入图片、视频弹窗 -->
        <Modal v-model="modal1" :title="'选择'+oFileType.title" :mask-closable="false" class-name="bing-modal">
            <simpleUpload :tipShow="otipShow" @imgPrew="getImgSrc" :fileType="oFileType.title" :acceptType="oFileType.type" :fileOpt="oFileOpt" @uploadSuccess="uploadSucceed"></simpleUpload>
            <div slot="footer">
                <Button type="text" size="large" @click="cancEdit">取消</Button>
                <Button type="primary" size="large" @click="addConfirm" :disabled="tempFile?false:true">确认添加</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {mapState} from "vuex"
import simpleUpload from "@/components/uploadFile";
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  name: "BingEditor",
  data(){
      return{
        courseTitle:this.parentTit,
        courseAuthor:this.parentAuthor,
        oMsg:this.msg,  
        modal1:false,
        oFileType:{title:'图片',type:'image/png,image/jpg,image/jpeg,image/gif'},
        oFileOpt:{
            filePurposeCode: 0,
            fileTypeCode: 0,
            audioVideoCode: 0
        },
        initUploadTip: false,
        otipShow: false,
        tempEditor:null,
        tempUiName:null,
        tempFile:null,
        myConfig: {
            // 编辑器自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: "100%",
            // 初始容器宽度
            initialFrameWidth: "100%",
            // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
            UEDITOR_HOME_URL: "/static/UEditor/",
            //工具栏配置
            toolbars: [[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','insertcode', 'pagebreak','|',
                'horizontal', 'date', 'time', 'spechars','|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'preview', 'searchreplace', 'help'
            ]]
        }
      }
  },
  computed:{
    ...mapState(['serviceUrl'])
  },
  props:{
      parentTit:{
        type: String,
      },
      parentAuthor:{
        type:String
      },
      msg:{
        type: String,
        default: "请在此编辑内容"
      }
  },
  watch:{
      msg(val){
          console.log(val);
          this.oMsg=val;
      },
      parentTit(val){
          this.courseTitle=val;
      },
      parentAuthor(val){
          this.courseAuthor=val;
      }
  },
  components: {
    simpleUpload,
    VueUeditorWrap,
  },
  methods:{
      getImgSrc(data) {
      //上传图片时本地预览路径
      console.log(data);
    //   this.tempUploadImg = data;
    },
    uploadSucceed(res) {
      //上传成功回调
      console.log(res);
      this.tempFile=res;
    },
    initUpload(){
        this.tempFile=null;
        this.otipShow=false;
    },
    cancEdit(){
        this.modal1=false;
        this.initUpload();
    },
    addConfirm(){
        console.log(this.tempEditor.execCommand)
        console.log(this.tempUiName)
        this.tempEditor.execCommand(this.tempUiName);
        this.modal1=false;
        this.initUpload();
    },
    saveCourseInfo(){//保存
        if(!this.courseTitle){
          this.$Message.error("请输入标题")
        }else{
          let obj={courseTitle:this.courseTitle,courseAuthor:this.courseAuthor,txt:this.oMsg}
          this.$emit("save-course",obj);
        }
    },
    addCustomUI(editorId, editorConfig){//自定义图标
        let that=this;
        // 1. 插入图片按钮
      window.UE.registerUI('test-button' + editorId, function (editor, uiName) {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {
            editor.execCommand('inserthtml', `<img style="width: auto;max-width:100%" src="${that.serviceUrl+that.tempFile}" alt="插入的图片" title="插入的图片"/>`)
          }
        })

        // 创建一个 button
        var btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '插入图片',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: "width: 20px !important;height: 20px !important;background-image: url('/static/UEditor/themes/default/images/icons.png') !important;background-position:-380px 0",
          // 点击时执行的命令
          onclick: function () {
            // 这里可以不用执行命令，做你自己的操作也可

            that.tempEditor=editor;
            that.tempUiName=uiName;
            
            that.oFileType.title="图片";
            that.oFileType.type="image/png,image/jpg,image/jpeg,image/gif";
            that.modal1=true;
            that.otipShow=true;
            // editor.execCommand(uiName)
          }
        })

        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName)
          if (state === -1) {
            btn.setDisabled(true)
            btn.setChecked(false)
          } else {
            btn.setDisabled(false)
            btn.setChecked(state)
          }
        })

        // 因为你是添加 button，所以需要返回这个 button
        return btn
      }, 46/* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)

      // 2. 插入视频按钮
      window.UE.registerUI('btn-uploadvideo' + editorId, function (editor, uiName) {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {
            editor.execCommand('inserthtml', `<video style="width: auto;max-width:100%" src="${that.serviceUrl+that.tempFile}" controls poster="/static/images/video.jpg" alt="插入的视频" title="插入的视频"/>`)
          }
        })

        // 创建一个 button
        var btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '插入视频',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: "width: 20px !important;height: 20px !important;background-image: url('/static/UEditor/themes/default/images/icons.png') !important;background-position:-320px -20px",
          // 点击时执行的命令
          onclick: function () {
            // 这里可以不用执行命令，做你自己的操作也可            
            that.tempEditor=editor;
            that.tempUiName=uiName;

            that.oFileType.title="视频";
            that.oFileType.type="audio/mp4,video/mp4";
            that.modal1=true;
            that.otipShow=true;
            // editor.execCommand(uiName)
          }
        })

        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName)
          if (state === -1) {
            btn.setDisabled(true)
            btn.setChecked(false)
          } else {
            btn.setDisabled(false)
            btn.setChecked(state)
          }
        })

        // 因为你是添加 button，所以需要返回这个 button
        return btn
      }, 47/* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)

      // 3. 插入音频按钮
      window.UE.registerUI('btn-uploadaudio' + editorId, function (editor, uiName) {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {
            editor.execCommand('inserthtml', `<audio style="width: auto;max-width:100%" src="${that.serviceUrl+that.tempFile}" controls alt="插入的音频" title="插入的音频"/>`)
          }
        })

        // 创建一个 button
        var btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '插入音频',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: "width: 20px !important;height: 20px !important;background-image: url('/static/UEditor/themes/default/images/icons.png') !important;background-position:-18px -40px",
          // 点击时执行的命令
          onclick: function () {
            // 这里可以不用执行命令，做你自己的操作也可            
            that.tempEditor=editor;
            that.tempUiName=uiName;

            that.oFileType.title="音频";
            that.oFileType.type="audio/mp3";
            that.modal1=true;
            that.otipShow=true;
            // editor.execCommand(uiName)
          }
        })

        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName)
          if (state === -1) {
            btn.setDisabled(true)
            btn.setChecked(false)
          } else {
            btn.setDisabled(false)
            btn.setChecked(state)
          }
        })

        // 因为你是添加 button，所以需要返回这个 button
        return btn
      },48/* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
        
    }
  }
};
</script>
<style lang="scss" scoped>
.tit-input{display: inline-block;width: 400px;vertical-align: inherit;}
</style>
<style>
.editor-wrap iframe{height: 60vh;}
</style>



